import React from 'react';
import { connect } from 'dva';
import createG2 from 'g2-react';
import { Button, Table, Form, Input, Popconfirm, Select, DatePicker ,Tabs,Row,Col} from 'antd';
const { RangePicker } = DatePicker;
import TypeModal from '../../components/ledger/TypeModal';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane
const Option = Select.Option;
import { baseUrl } from '../../config/system';
function AssetTypeLedger({ dispatch, assetTypeLedger, loading, form }) {
  const roomOptions = assetTypeLedger.roomList?assetTypeLedger.roomList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const typeOptions = assetTypeLedger.assetTypeList?assetTypeLedger.assetTypeList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  };
  function callback(key) {
    var formData=form.getFieldsValue();
    var objectData={};
    objectData.roomIds=formData.roomIds;
    objectData.typeIds=formData.typeIds;
    if(formData.dates!=null&&formData.dates.length>0){
      objectData.startDate=formData.dates[0];
      objectData.endDate=formData.dates[1];
    }
    dispatch({
      type: 'assetTypeLedger/queryTypeList',
      payload:{...objectData},
    });
  }
  // const ZXChart = createG2(chart => {
  //     chart.col('month', {
  //       alias: '日期',
  //       range: [0, 1]
  //     });
  //     chart.col('temperature', {
  //       alias: '进入次数'
  //     });
  //     chart.line().position('name*value').size(2);
  //     chart.render();
  //   });
    const Pie = createG2(chart => {
      chart.col('label', {
             alias: '设备类型'
           });
      chart.axis('value', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#000' //  设置线的颜色
        }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
        formatter: function(val) {
              return (val / 1 )+"";
            },
        labels: {
          label: {
            textAlign: 'center', // 文本对齐方向，可取值为： left center right
            fill: '#000', //文本的颜色
            fontSize: '12', // 文本大小
            rotate: 0 // 旋转角度
          }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
          autoRotate: true // 是否需要自动旋转
        },
        title: '类型台账', // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
        tickLine: {
          lineWidth: 1,
          stroke: '#000',
          value: 5,
        }, // 坐标点对应的线，null 不显示 图形属性
        labelOffset: 16, // 标轴文本距离轴线的距离
        grid: null, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
        gridAlign: 'middle',
      });
      chart.axis('label', {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: '#000' //  设置线的颜色
        }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
        labels: {
          label: {
            textAlign: 'center', // 文本对齐方向，可取值为： left center right
            fill: '#000', //文本的颜色
            fontSize: '12', // 文本大小
            rotate: 0 // 旋转角度
          }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
          autoRotate: true // 是否需要自动旋转
        },
        labelOffset: 16, // 标轴文本距离轴线的距离
        tickLine: null, // 坐标点对应的线，null 不显示 图形属性
        title: null, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
      });
      chart.interval().position('label*value')
        .color('label',['#2cb7f5'])
        .label('value',{
          label: {
            fill: '#fff', //文本的颜色
            fontSize: '12', // 文本大小
          },
        })
      chart.render();
    });
    let plotCfg = {
      margin: [20, 180,80,80]
    };
 
    const handleGetOutEdit = () => {
      let param = JSON.stringify({ ...getFieldsValue() });
      param = encodeURIComponent(param);
      window.open(baseUrl+"/dataExcel/exportAssetType.jhtml?param="+param);
    }

    const modalDetailProps = {
        visible: assetTypeLedger.modalVisible,
        maskClosable: false,
        dispatch: dispatch,
        detailList:assetTypeLedger.detailList,
        pageNum:assetTypeLedger.pageNum,
        pageSize:assetTypeLedger.pageSize,
        total:assetTypeLedger.total,
        roomId:assetTypeLedger.roomId,
        brandId:assetTypeLedger.brandId,
        title:'品牌明细',
        wrapClassName: 'vertical-center-modal',
        onCancel () {
          dispatch({
              type: 'assetTypeLedger/hideModal',
          })
        },
    }
  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    return (
      <div style={{backgroundColor:'#fff'}}>
        <div style={{minHeight:'100%'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'50px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
          <Form layout="inline" style={{width:'100%'}}>
          <Row gutter={16}>
                <Col span={5}>
                 <FormItem style={{ width: '100%' }} {...formItemLayout}>
                  {getFieldDecorator('roomIds')(
                      <Select
                      showSearch
                      mode="multiple"
                      style={{ width: '100%' }}
                      placeholder="选择机房"
                      optionFilterProp="children"
                  >
                    {roomOptions}
                  </Select>
                  )}
                  </FormItem>
                </Col>
                <Col span={5}>
                  <FormItem style={{ width: '100%' }} {...formItemLayout}>
                    {getFieldDecorator('typeIds')(
                        <Select
                        showSearch
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="选择资产类型"
                        optionFilterProp="children"
                    >
                      {typeOptions}
                    </Select>
                    )}
                    </FormItem>
                </Col>
                <Col span={5}>
                  <FormItem style={{ width: '100%' }} {...formItemLayout}>
                    {getFieldDecorator('dates')(
                      <RangePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}></Col>
                <Col span={5} style={{textAlign: 'right'}}>
                  <FormItem>
                   <Button type="primary" size='large' onClick={callback.bind(this,0)}  icon="search">查询</Button>
                  </FormItem>             
                 <FormItem>
                   <Button size="large" onClick={handleGetOutEdit} icon="download" >导出</Button>
                 </FormItem> 
                </Col>
            </Row>          
            </Form>
            </div>
            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'20px',paddingRight:'20px'}}>
            <Row>
              <Col span={24}>
            <Tabs onChange={callback}  type="card">
             <TabPane tab={'列表'} key="table">
               <Table
                 columns={assetTypeLedger.typeColumnsList}
                 dataSource={assetTypeLedger.typeList}
                 pagination={false}
                 rowKey={record => record.id}
                 loading={assetTypeLedger.typeLoading}
                 scroll={{ x:assetTypeLedger.typeWidth,y:500}}
               />
             </TabPane>
             <TabPane tab={'图表'} key="echart">
              <Pie key={new Date().valueOf()} data={assetTypeLedger.chartData}   height={600} plotCfg={plotCfg} forceFit={true}/>
             </TabPane>
           </Tabs>
           </Col>
           </Row>
            </div>
            <TypeModal {...modalDetailProps} />
       </div>
     </div>
  );
}

function mapStateToProps(state) {
  return { assetTypeLedger : state.assetTypeLedger};
}

AssetTypeLedger = Form.create()(AssetTypeLedger);

export default connect(mapStateToProps)(AssetTypeLedger);
